<!-- 水印组件首页引入 全局使用 -->
<template>
	<view v-if="showWatermark" class="watermark" :style="{position: 'fixed'}">
		<canvas canvas-id="watermark" style="position: absolute;"
			:style="{transform: 'scale(' + scale + ')',width: canvasWidth + '%',height: canvasWidth + '%',top: canvasTop + '%',left: canvasTop + '%'}"></canvas>
	</view>
</template>

<script>
	/**
	 * @property {String}			title				标题文字（默认 水印 ）
	 * @property {Number}			titleSize			标题文字字号（默认 16 ）
	 * @property {Number}			rotate				旋转弧度（默认 -45 ）
	 * @property {Object}			position			布局方式（绝对布局-相对布局）（默认 'fixed-绝对布局' ）
	 * @property {Number}			scale				放大缩小（默认1）
	 * @property {Number}			column				水印列数（默认15）
	 * 
	 */

	export default {
		props: {
			// 标题文字
			msg: {
				type: String,
				default: '水印'
			},
			// 标题文字字号
			titleSize: {
				type: Number,
				default: 28
			},
			fillStyle:{
				type: String,
				default: 'rgba(31, 0, 0, 0.1)'
			},
			// 旋转弧度
			rotate: {
				type: Number,
				default: -28
			},
			// 放大缩小
			scale: {
				type: Number,
				default: 1
			},
			// 水印列数
			column: {
				type: Number,
				default: 10
			},
		},
		data(){
			return{
				watermarkView: null,
				showWatermark:true
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.createWatemark();
			})
		},
		computed: {
			// 画布宽度 
			canvasWidth() {
				return 100 / this.scale
			},
			// 画布距离顶部高度
			canvasTop() {
				return -((100 / this.scale) - 100) / 2
			},
		},
		methods: {
			createWatemark() {
				if (!this.showWatermark) {
					return
				}
				let _self = this;
				let id = 'watermark'
				if (plus.nativeObj.View.getViewById(id) !== null) {
					plus.nativeObj.View.getViewById(id).close();
				}
				let ctx = uni.createCanvasContext('watermark', this);
				// 旋转弧度
				ctx.rotate((this.rotate * Math.PI) / 180);
				// 设置字体颜色
				let fontSize = uni.upx2px(this.titleSize);
				for (let j = 0; j < this.column; j++) {
					for (let i = 1; i < this.column; i++) {
						//这个for循环代表横向循环，
						let num = 0
						ctx.beginPath();
						ctx.setFontSize(fontSize);
						ctx.setFillStyle(this.fillStyle);
						ctx.fillText(this.msg, 135 * -i, 150 * j);
						num++
					}
					for (let i = 1; i < this.column; i++) {
						//这个for循环代表横向循环，
						let num = 0
						ctx.beginPath();
						ctx.setFontSize(fontSize);
						ctx.setFillStyle(this.fillStyle);
						ctx.fillText(this.msg, 135 * i, -150 * j);
						num++
					}
					for (let i = 1; i < this.column; i++) {
						//这个for循环代表横向循环，
						let num = 0
						ctx.beginPath();
						ctx.setFontSize(fontSize);
						ctx.setFillStyle(this.fillStyle);
						ctx.fillText(this.msg, -135 * i, -150 * j);
						num++
					}
					for (let i = 0; i < this.column; i++) {
						//这个for循环代表横向循环，
						let num = 0
						ctx.beginPath();
						ctx.setFontSize(fontSize);
						ctx.setFillStyle(this.fillStyle);
						ctx.fillText(this.msg, 135 * i, 150 * j);
						num++
					}
				}
				ctx.draw(false, function() {
					uni.canvasToTempFilePath({
						canvasId: "watermark",
						success: function(res) {
							_self.showWatermark = false;
							let path = res.tempFilePath;
							uni.getSystemInfo({
								success: function(res) {
									let tarArr = [];
									tarArr.push({
										tag: 'img',
										src: path,
									});
									this.watermarkView = new plus.nativeObj.View(id, {
										top:'70px',
										left:'0px',
										right: '0px',
										bottom: '0px'
									}, tarArr);
									//拦截View控件的触屏事件,将事件穿透给下一层view
									this.watermarkView.interceptTouchEvent(false);
									this.watermarkView.show();
								}
							});
						}
					});
				});
			},
			/**
			 * 销毁
			 */
			beforeDestroy() {
				this.watermarkView && this.watermarkView.close()
			}
		}
	};
</script>

<style>
	.watermark {
		pointer-events: none;
		z-index: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>